import React, { PureComponent, Fragment } from 'react';
import { Button, Popconfirm, Alert, Tag } from 'antd';
// import { connect } from 'dva';
import lodash from 'lodash';
// import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import NotificationConfigModalEditor from './NotificationConfigModalEditor';
import { NotificationTypeMapper } from '../../../utils/enum';
// import classNames from 'classnames';
import styles from './NotificationConfigAdd.less';

// @connect(({ JobModel, loading }) => ({
//   JobModel,
//   quetyLoading: loading.effects['JobModel/queryPage'],
// }))
export default class NotificationConfigAdd extends PureComponent {

  state = {

    // 是否显示新增或编辑监控项
    showNotificationConfigEditor: false,
    // 监控项新增或编辑标识
    addNotificationConfigEditor: true,
    // 新增或编辑的数据
    notificationConfigData: {
      notificationType: 'email',
      templateId: undefined,
      targetList: [],
    },
  }

  // 数据初始化
  componentDidMount() {
    // window.addEventListener('resize', this.handleHeight);
    // const { match: { params } } = this.props;
    // dispatch({ type: 'JobModel/findAllJob' });
    // console.log(params)
  }

  getNotificationConfigItem = ({ notificationType, templateId, targetList }) => {
    const { delNotificationConfigFunc } = this.props;
    const existsTarget = targetList && targetList.length > 0;
    let notificationTypeLable = NotificationTypeMapper[notificationType];
    if (!notificationTypeLable) notificationTypeLable = NotificationTypeMapper.error;
    return (
      <div key={`${notificationType}-${templateId}`} className={styles.divBox} style={{ position: 'relative' }}>
        <div className={styles.divBoxTitle}>{notificationTypeLable.label}-[{templateId}]</div>
        {
          existsTarget ? (
            <Button.Group size="small" style={{ position: 'absolute', right: 12, top: 12 }}>
              <Button
                icon="edit"
                onClick={() => {
                  this.setState({ notificationConfigData: { notificationType, templateId, targetList }, addNotificationConfigEditor: false, showNotificationConfigEditor: true });
                  this.notificationConfigEditorInit({ notificationType });
                }}
              >
                编辑
              </Button>
              <Popconfirm
                placement="leftTop"
                title="确定删除当前告警通知项?"
                okText="删除"
                cancelText="取消"
                onConfirm={() => {
                  if (delNotificationConfigFunc instanceof Function) {
                    delNotificationConfigFunc(notificationType, templateId);
                  }
                }}
              >
                <Button icon="delete" type="danger">删除</Button>
              </Popconfirm>
            </Button.Group>
          ) : ''
        }
        {
          existsTarget ?
            targetList.map(target => <Tag key={target} closable={targetList.length > 1 && false} onClose={undefined}>{target}</Tag>) :
            (
              <Alert
                type="warning"
                showIcon
                message={(
                  <Fragment>
                    <span>当前通知项没有设置通知对象，请</span>
                    <a
                      onClick={() => {
                        this.setState({ notificationConfigData: { notificationType, templateId, targetList }, addNotificationConfigEditor: false, showNotificationConfigEditor: true });
                        this.notificationConfigEditorInit({ notificationType });
                      }}
                    >
                      编辑
                    </a>
                    <span>或</span>
                    <a
                      onClick={() => {
                        if (delNotificationConfigFunc instanceof Function) {
                          delNotificationConfigFunc(notificationType, templateId);
                        }
                      }}
                    >
                      删除
                    </a>
                  </Fragment>
                )}
              />
            )
        }
      </div>
    );
  }

  getNotificationConfigList = (notificationConfigList) => {
    if (!notificationConfigList) return '';
    // if (notificationConfigList.length <= 0) {
    //   notificationConfigList.push({ notificationType: 'email', templateId: 'templateId001', targetList: ['1183409807@qq.com', 'lzw1000000@163.com'] });
    //   notificationConfigList.push({ notificationType: 'sms', templateId: 'templateId002', targetList: [] });
    // }
    return notificationConfigList.map(item => this.getNotificationConfigItem(item));
  }

  render() {
    const { showNotificationConfigEditor, addNotificationConfigEditor, notificationConfigData } = this.state;
    const { notificationConfigList, addNotificationConfigFunc, updateNotificationConfigFunc } = this.props;
    return (
      <Fragment>
        {this.getNotificationConfigList(notificationConfigList)}
        <Button
          style={{ width: '100%', marginTop: 8, marginBottom: 8 }}
          size="large"
          type="dashed"
          icon="plus"
          onClick={() => {
            this.setState({ notificationConfigData: { notificationType: 'email' }, addNotificationConfigEditor: true, showNotificationConfigEditor: true });
            this.notificationConfigEditorInit({ notificationType: 'email' });
          }}
        >
          新增告警通知项
        </Button>
        <NotificationConfigModalEditor
          notificationConfigData={notificationConfigData}
          addFlag={addNotificationConfigEditor}
          configExists={(notificationType, templateId) => lodash.findIndex(notificationConfigList, { notificationType, templateId }) !== -1}
          resetFunc={reset => { this.notificationConfigEditorReset = reset }}
          initFunc={init => { this.notificationConfigEditorInit = init }}
          visible={showNotificationConfigEditor}
          confirmLoading={false}
          onCancel={() => {
            this.setState({ showNotificationConfigEditor: false });
            this.notificationConfigEditorReset();
          }}
          onOk={({ notificationType, templateId, targetList }, oldData) => {
            if (addNotificationConfigEditor === false) {
              if (oldData && updateNotificationConfigFunc instanceof Function) {
                updateNotificationConfigFunc(oldData.notificationType, oldData.templateId, { notificationType, templateId, targetList });
              }
            } else if (addNotificationConfigFunc instanceof Function) {
              addNotificationConfigFunc({ notificationType, templateId, targetList });
            }
            this.setState({ showNotificationConfigEditor: false });
            this.notificationConfigEditorReset();
          }}
        />
      </Fragment>
    );
  }
}
